Skip to main content

Integrate TS Context Menu

With the TS Chart SDK, you can integrate a custom context menu into your chart. This context menu allows users to interact with the chart in a more intuitive way.

To integrate a Custom Context Menu in your Custom Chart, you can use ChartToTsEvent.ShowContextMenu and ChartToTsEvent.HideContextMenu.

You can define this in your onclick event in your JavaScript code. The ChartToTsEvent.showContextMenu will take three types of parameters:

  • id: The ID for your context menu.
  • clickedPoint: This will have the pair of columnId and values that we generated in Customize Tooltips using the getPointDetails function.
  • customActions: This will have the list of custom actions that you want to add to your context menu.

Let's have an example to add a custom action to have a console.log statement whenever this custom action is clicked. For this, you need to define customAction in the following way:

const customAction = {
id: "customAction",
label: "Custom Action",
action: () => {
console.log("Custom Action Clicked");
},
};

Now you can use this customAction in the showContextMenu function as shown below:

const yourOnClickHandler = (dataX, dataY) => {
ctx.emitEvent(ChartToTsEvent.showContextMenu, {
id: "customAction",
clickedPoint: getPointDetails(dataX, dataY),
customActions: [customAction],
});
};

Customize Native TS actions

After TS-chart-sdk 1.3.0 developers can have functionality of hidding,disabling and adding native TS context menu and action menu actions. To do so u have to define these in chartConfigParameters.

(async () => {
const ctx = await getChartContext({
// other props
chartConfigParameters: {
customVisualConfig: {
customChartHiddenActions:[<your_hidden_actions>],
customChartDisabledActions:[<your_disabled_actions>],
customChartVisibleActions:[<your_visible_actions>]
},
},
});
})();

NOTE: The developer is advised to use either customChartHiddenActions or customChartVisibleActions. Don't define customChartVisibleActions as empty array it may cause some issues when using with TS embed.